<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        form 表单标签 帮助服务器手机用户信息
        1.form 标签
        2. 表单控件
        3. 按钮
     -->
     <form action="">
        <!-- 
            文本输入框 <input type="text"> 
            type默认值是text 省略不写或者写一个错误的值也是text

            placeholder 设置提示信息
            value 设置默认值

            一般在新增时设置提示信息  做修改时设置默认值

            使用label标签 将文字和表单控件进行绑定
            1、设置label标签包含文字
            2、在表单控件中设置id属性
            3、在label标签中设置for属性，属性值必须与id相同
        -->
    <fieldset>
        <legend>输入区域</legend>
        <p>
            <label for="username">姓名:</label>
            <input type="text" placeholder="用户名不能修改"
                value="jack" id="username" name="username">
        </p>
        <!-- 
            密码输入框 <input type="password">
            属性和文本输入框相同
         -->
         <p>
            <label for="userpassword">密码:</label>
            <input type="password" placeholder="6-12位" 
                   value="123456" id="userpassword">
         </p>
         <!-- 
            数字输入框 <input type="number">
            属性和文本输入框相同
          -->
        <p>
            <label for="age">年龄:</label>
            <input type="number" placeholder="18-80"
                    value="29" id="age">
        </p>
    </fieldset>
        <!-- 
            单选框 <input type="radio">
            将多个单选按钮设置相同的 name属性值 才是一组按钮
            默认选中 checked 只能有一个单选框默认选中
            当属性值和属性名相同时， 可以只设置属性名
            <input type="radio" name="sex" checked="checked"> 男
         -->
        <p>
            性别: <input type="radio" name="sex" id="boy" value="1" checked> 
                  <label for="boy">男</label>
                  <input type="radio" name="sex" value="2" id="girl"> 
                  <label for="girl">女</label>
                  <input type="radio" name="sex" value="3" id="secret">
                  <label for="secret">保密</label>
        </p>
        <!-- 
            复选框 <input type="checkbox">
            将多个单选按钮设置相同的 name属性值 才是一组按钮
            默认选中 checked 只能有一个单选框默认选中
         -->
        <p>
            爱好：<input type="checkbox" id="html" checked>
                <label for="html">html</label>
                <input type="checkbox" id="css"> 
                <label for="css">css</label>
                <input type="checkbox" id="js">
                <label for="js">js</label>
                <input type="checkbox" id="vue"> 
                <label for="vue">vue</label>
        </p>
        <!-- 
            下拉列表 select 标签
            option 设置下拉项
            有几个下拉选项就设置几对option标签
            select>option>内容
            selected 默认选中,只能有一个选项被默认选中
         -->
         <p>
            学历：<select>
                <option>高中</option>
                <option>大专</option>
                <option selected>本科</option>
                <option>硕士研究生</option>
            </select>
         </p>
         <!-- 
            文本域 textarea 标签
            cols 设置列数
            rows 设置行数
            placeholder 设置提示信息
            默认值直接写在标签内
          -->
          <p>
            简介：<textarea cols="30" rows="10" placeholder="个人信息"></textarea>
          </p>
          <fieldset>
            <legend>补充</legend>
            <input type="color">
            <input type="date">
            <input type="datetime-local">
            <input type="email">
            <input type="file">
            <input type="month">
            <input type="range">
            <input type="week">
          </fieldset>
          <p>
            <!-- 
                按钮
                普通按钮  <input type="button"> 不具备提交表单功能
                默认显示内容是空白，通过value属性设置显示内容

                提交按钮  <input type="submit"> 具备提交表单功能
                默认显示内容是提交，通过value属性设置显示内容

                重置按钮 <input type="reset">重置页面内容回复到才加载完的内容
                默认显示内容是重置，通过value属性设置显示内容

                button按钮  <button></button>
                默认显示是空白，直接写在标签内设置显示内容

                fieldset 设置表单元素分组，病使用外框包含
                legend 设置fieldset分组的标题
             -->
             <fieldset>
                <legend>按钮区域</legend>
                <input type="button" value="下一步">
                <input type="submit" value="注册">
                <input type="reset" value="reset">
                <button>提交</button>
             </fieldset>
          </p>
     </form>
</body>
</html>
